<!-- 员工详情组件 -->
<template>
  <div class="datail">
    <el-card>
      <!-- 跳转到打印页面的按钮 -->
      <el-button v-if="activeName !== 'first'"
        @click="$router.push(`/employees/myprint?active=${activeName}&id=${id}`)">打印</el-button>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <div class="formbox">
            <el-form v-model="UserInform" label-width="100px">
              <el-form-item label="姓名">
                <el-input v-model="UserInform.username"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="UserInform.password" type="password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="update_btn">更新</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <userinfo></userinfo>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <job_info></job_info>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template> 

<script>
// 导入获取员工基本信息
import { getBaseInfoApi } from '@/api/user'
import { updateEmpApi } from '@/api/employees'
// 导入组件
import userinfo from '../components/userinfo.vue'
import job_info from '../components/job_info.vue'
export default {
  components: {
    userinfo,
    job_info
  },

  data () {
    return {
      activeName: 'first',
      UserInform: {
      },
      // 当前操作数据的id 获取地址栏上的id 获取id用query
      id: this.$route.query.id
    }
  },
  methods: {
    // 更新员工数据
    async update_btn () {
      const res = await updateEmpApi(this.UserInform)
      this.$message.success('账户设置更新成功')
    },
    // 获取当前id的信息
    async getBaseInfo () {
      const res = await getBaseInfoApi(this.id)
      // 赋值给form
      this.UserInform = res.data
    }
  },

  //生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getBaseInfo()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="scss"  scoped>
/* @import url(); 引入css类 */
.datail {
  padding: 20px;

  .formbox {
    display: flex;
    margin-left: 200px;
    margin-top: 50px;
  }

}
</style>